<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./assets/lib/template-web.js"></script>

  <!-- 制作模板 -->
  <script type="text/html" id="tpl-test">
    <!-- 直接输出一个值 -->
  <h2>{{title}}</h2>

  <!-- 条件判断 -->
  {{if age > 20}}
  <p>大于20</p>
  {{else}}
  <p>小于20</p>
  {{/if}}

  <!-- 遍历 -->
  <ul>
    {{each data item}}
    <li>{{item.id}} -- {{item.name}} -- {{item.nickname}}</li>
    {{/each}}
  </ul>

  <!-- 使用内置函数 -->
  <p>{{str.toUpperCase()}}</p>

  <!-- 原样输出 -->
  {{@str2}}

  <!-- 使用自定义函数--使用模板过滤器函数 -->
  {{str3 | ucfirst}}
  </script>


  <script>
    // 调用 template，组合数据和模板结构
    let res = {
      title: '哈哈哈',
      age: 20,
      data: [
        { id: 1, name: '宋江', nickname: '及时雨' },
        { id: 2, name: '卢俊义', nickname: '玉麒麟' }
      ],
      str: 'hello',
      str2: '<h3>啦啦啦</h3>',
      str3: 'hello world'
    };

    // 写自定义的函数（模板过滤器函数）
    template.defaults.imports.ucfirst = function (s) {
      // console.log(s); // 形参是原来准备输出的 hello world
      // return '1234567'; // 返回值是最终输出的值
      return s.substr(0, 1).toUpperCase() + s.substr(1);
    }

    // let 模板结构和数据组合好的结果 = template('模板id', 数据)
    let htmlStr = template('tpl-test', res);
    console.log(htmlStr);
    document.body.innerHTML = htmlStr;
  </script>
</body>

</html>